<template>
  <div class="registerInfo-container">
    <modules-title title-name="库存警告"></modules-title>
    <div class="main">
      <div class="searchBar">
        <el-form inline :model="storage">
          <el-form-item label="药品类型">
            <el-select v-model="storage.category_id" @change="changeCategory" class="searchBar_select">
              <el-option
                v-for="item in category"
                :key="item.ID"
                :label="item.category_name"
                :value="item.ID"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="药品名称" prop="product_name" align="center"></el-table-column>
          <el-table-column label="分类" prop="category_name" align="center"></el-table-column>
          <el-table-column prop="pack" label="规格" align="center"></el-table-column>
          <el-table-column prop="production" label="厂家" align="center"></el-table-column>
          <el-table-column prop="batch_no" label="批号" v-if="state.drugs_management.function_set"
                           align="center"></el-table-column>
          <el-table-column prop="number" label="库存" align="center">
            <template  #default="{row}">
              {{row.number}}{{row.piece_unit}}
            </template>
          </el-table-column>
          <el-table-column prop="min_num" label="库存阈值" align="center">
            <template  #default="{row}">
              {{row.min_num}}{{row.piece_unit}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="storage.pager.number"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="storage.pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {getWarningList,getCategoryList} from '@/api/drugsManagement';
  export default {
    name: 'wareHouseWarning',
    data() {
      return {
        value:'',
        storage: {
          pager:{
            number:1,
            size:10,
          },
          category_id:0,
          type:1,
          day:30,
        },
        supplyList: [
          {
            value: 1,
            label: '药品库存预警 '
          },
          {
            value: 2,
            label: '效期提醒'
          },
        ],
        days:[
          {
            value: 7,
            label: '一周内 '
          },
          {
            value: 30,
            label: '一月内 '
          },
          {
            value: 60,
            label: '两个月内 '
          },
          {
            value: 90,
            label: '三个月内 '
          },
          {
            value: 180,
            label: '半年内 '
          },
          {
            value: 366,
            label: '一年内 '
          },

        ],
        tableData: [],
        total:0,
        category:[],//分类
        state:{}
      };
    },
    created(){
      this.state = JSON.parse(this.$store.getters.systemSetting.dic_value)
      this.getCategoryListData()
      this.getWarningListData()
    },
    methods: {
      //获取药品分类
      getCategoryListData(){
        getCategoryList().then(res=>{
          if(res.code === 200){
            this.category = res.data || []
          }
        })
      },
      //获取列表数据
      getWarningListData(){
        getWarningList(this.storage).then(res=>{
          if(res.code === 200){
            this.tableData = res.data.data || []
            this.total = res.data.total
          }
        })
      },
      //分类事件
      changeCategory(val){
        this.storage.category_id = Number(val)
        this.storage.pager.number = 1
        this.getWarningListData()
      },
      //条数
      handleSizeChange(val) {
        this.storage.pager.size = val
        this.getWarningListData()
      },
      //页码
      handleCurrentChange(val) {
        this.storage.pager.number = val
        this.getWarningListData()
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/drugsManagement/wareHouseWarning.scss";
</style>
